<template>
  <content-field>
    <n-grid col="3"> 面板留空 </n-grid>
    <n-card>
      <template #header>{{}}</template>
      <template #header-extra v-if="$store.state.user.is_staff">
        <n-space vertical
          ><n-tag :type="article.is_active ? 'success' : 'default'">
            {{ article.is_active ? "√ 广播中" : "一 未广播" }}
          </n-tag>
          <n-button type="primary" dashed @click="to_article_edit(article.id)"
            >编辑 &nbsp; <n-text depth="3"> #{{ article.id }}</n-text></n-button
          >
        </n-space>
      </template>
      <template #default>
        <v-md-preview :text="article.content" />
      </template>
    </n-card>
  </content-field>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { shallowRef } from "@vue/reactivity";
import remoteData from "@/composables/RemoteData";
import routerJump from "@/composables/RouterJump";

export default {
  components: { ContentField },
  setup() {
    let article = shallowRef({
      id: null,
      collection: {
        name: "",
        id: "",
      },
    }); // 浅层ref
    const { get_article_details } = remoteData();
    const { go_404, to_article_edit } = routerJump();
    // 第一篇文章作为主页说明
    get_article_details(article, 1).catch(() => {
      go_404();
    });
    return {
      article,
      to_article_edit,
    };
  },
};
</script>

<style>
</style>